import React, { useState } from 'react'
import { getCp } from '../../api/use'
import Myhand from '../../compont/Myhand'
import { useLoaderData, useSearchParams } from 'react-router-dom'
import Myitem from '../../compont/Myitem'
import { InfiniteScroll, Selector } from 'antd-mobile'

const Index = () => {
    
    const lo = useLoaderData()
    const [sp] = useSearchParams()
    const [list, setList] = useState(lo.list)
    console.log(list);
    const [hasMore, setHasMore] = useState(true)
    const [page, setPage] = useState(1)
    async function loadMore() {
        setPage((page) => page + 1)
        const data = { ...Object.fromEntries(sp), page: page + 1 }
        const { data: res } = await getCp(data)
        setList([...list, ...res])
        if (res.length === 0) {
            setHasMore(false)
        }
    }
    const options = [
        {
            label: '筛选',
            value: '300-500',
        },
        {
            label: '出发时间',
            value: '2025-4-17',
        },
        {
            label: '旅行耗时',
            value: '1:35',
        },
    ]
    return (
        <div>
            <Myhand></Myhand>
            <div>
                {
                    list.map((item) => (
                        <Myitem key={item.id}{...item} />
                    ))
                }
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </div>
            <div className='bom'>
                <Selector
                    options={options}
                    defaultValue={['2', '3']}
                    multiple
                    onChange={(arr, extend) => console.log(arr, extend.items)}
                />
            </div>
        </div>
    )
}

export default Index
export const loader = async ({ request }) => {
    const url = new URL(request.url)
    const sp = Object.fromEntries(url.searchParams)
    const { data: res } = await getCp(sp)
    return {
        list: res
    }
}
